<template>
	<view class="bg"  :style="{
      backgroundImage: `url('${bannerList}')`,
      backgroundSize: 'cover',
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'center',
      width: '100%',
      height: '100vh',
      position: 'relative',
    }">
		<uv-popup ref="signRef" mode="center" :round="15" :closeOnClickOverlay="false" :safeAreaInsetBottom="false">
			<view class="register-popup" style="width: 630rpx;">
				<view class="register-title">
					<view class="title">
						报名人信息
					</view>
				</view>
				<view class="apply-info">
					<view class="name-phone">
						<text>{{activeInfo.name}}</text>
						<text style="padding-left: 20rpx;">{{activeInfo.mobile}}</text>
					</view>
					<view class="apply-reason">
						参加理由：{{activeInfo.apply_text}}
					</view>
				</view>
				<view class="footer-btn">
					<!-- <view class="cancel" @click="signRef.close()">
						取消
					</view> -->
					<!-- @click="trueSign" -->
					<view class="confirm" @click="confirm">
						确认
					</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref,
		computed,
		watch,
		onMounted
	} from 'vue';
	import {
		useActiveStore
	} from '@/store/modules/active.js'
	
	const activeStore = useActiveStore()
	// import {
	// 	UserDeleteClaimTask,
	// 	UserClaimTask
	// } from "@/api/active.js"
	const signRef = ref()
	const activeId=ref()
	const user_apply_id=ref()
	const user_id=ref()
	const sign_code=ref()
	const bannerList=ref()
	onLoad((options) => {
		
		activeId.value=options.user_activity_id
		user_id.value=options.user_id
		user_apply_id.value=options.user_apply_id
		sign_code.value=options.sign_code
		getBannerList()
		setTimeout(() => {
			signRef.value.open()
		}, 1000)
		getActiveDetail()
	})
	const activeInfo=ref({
		name:'',
		apply_text:'',
		mobile:''
	})
	const getBannerList = async () => {
		let res = await activeStore.getBannerList({
			position: 2
		})
		if (res.code == 200) {
			let img = res.data.map(item => {
				return uni.getStorageSync('baseUrl') + item.image
			})
			bannerList.value=img[0]
		}
	}
	// 获取报名人详情
	const getActiveDetail = async () => {
		let params = {
			user_activity_id: activeId.value,
			user_apply_id:user_apply_id.value
		}
		var res = await activeStore.getApplyActivityUserInfo(params)
		activeInfo.value.name=res.data.name
		activeInfo.value.apply_text=res.data.apply_text
		activeInfo.value.mobile=res.data.mobile
		
	}
	// 确认签到
	const confirm=async ()=>{
		let params = {
			user_activity_id: activeId.value,
			user_apply_id:user_apply_id.value,
			sign_code:sign_code.value,
			user_id:user_id.value
		}
		var res = await activeStore.signActivityByPoster(params)
		if (res.code == 200) {
				uni.$uv.toast('确认签到成功')
			setTimeout(()=>{
				uni.navigateBack()
			},1000)
		}
	}
</script>

<style lang="scss" scoped>
	.register-popup {
		padding: 30rpx;

		.register-title {
			display: flex;
			align-items: center;
			justify-content: center;

			.title {
				flex: 1;
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
				text-align: center;
			}
		}

		.apply-info {
			margin-top: 40rpx;
			padding: 40rpx;
			background-color: #f6f6f6;
			border-radius: 20rpx;

			.name-phone {
				padding-bottom: 20rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
			}

			.apply-reason {
				width: 400rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}
		}

		.tips {
			padding: 100rpx 0;
			text-align: center;
			font-weight: bold;
			font-size: 32rpx;
			color: #333;
		}

		.tips1 {
			text-align: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
		}

		.footer-btn {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 100rpx;
			font-weight: bold;
			font-size: 28rpx;
			line-height: 88rpx;
			text-align: center;

			.cancel {
				width: 260rpx;
				height: 88rpx;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				background: #F6F6F6;
				color: #666666;
			}

			.confirm {
				width: 550rpx;
				height: 88rpx;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				background: #FE3052;
				color: #fff;
			}
		}
	}
</style>